🖱️ Context Menus
Master AppStruct's context menu system for efficient element manipulation. Context menus provide quick access to common actions and operations, adapting to your current selection and workflow.
Overview
AppStruct's context menu system provides:
- Element Context Menus - Right-click menus for individual elements
- Canvas Context Menus - Background canvas right-click options
- Multi-Select Menus - Bulk operation menus for multiple selections
- Mobile Touch Menus - Touch-optimized context menus for mobile devices
- Adaptive Actions - Context-aware menu options based on selection
1. Element Context Menus
Accessing Element Menus
- Desktop: Right-click on any selected element
- Mobile: Long-press on element for touch context menu
- Keyboard: Select element and press Menu key or Shift+F10
- Menu Position: Appears near cursor/touch point, adjusted for screen boundaries
Standard Element Actions
- Copy: Copy element to clipboard for pasting elsewhere
- Duplicate: Create immediate copy with smart positioning
- Group: Combine with other selected elements (requires multi-select)
- Move Forwards: Increase z-index to bring element forward
- Move Backwards: Decrease z-index to send element backward
- Delete: Remove element from canvas
Conditional Actions
- Group: Only available when 2+ elements are selected
- Move Forwards: Disabled when element is already at maximum z-index (9999)
- Move Backwards: Disabled when element is already at minimum z-index (0)
- Ungroup: Only available when group is selected
2. Canvas Context Menus
Canvas Background Menus
- Access: Right-click on empty canvas areas
- Paste: Paste previously copied elements
- Paste from Extension: Import elements captured via browser extension
- Select All: Select all elements on current page
- Clear Selection: Deselect all currently selected elements
Canvas Menu Features
- Intelligent Positioning: Pasted elements appear near click location
- Extension Integration: Seamless browser extension element import
- Quick Selection: Rapid selection management tools
- Undo Support: All canvas actions support undo/redo
3. Multi-Select Context Menus
Multi-Select Actions
- Group Elements: Combine all selected elements into single group
- Copy All: Copy entire selection to clipboard
- Duplicate All: Create duplicates of all selected elements
- Delete All: Remove all selected elements
- Align Elements: Align multiple elements relative to each other
- Distribute Elements: Evenly space multiple elements
Bulk Operations
- Style Application: Apply styles to multiple elements simultaneously
- Layer Management: Move multiple elements forward/backward together
- Transform Operations: Resize or reposition multiple elements as unit
- Property Changes: Modify properties across multiple elements
4. Mobile Context Menus
Touch-Optimized Design
- Large Touch Targets: Minimum 44px touch targets for accessibility
- Clear Visual Hierarchy: Well-organized menu structure
- Haptic Feedback: Vibration confirms menu actions
- Gesture Integration: Swipe gestures for quick menu navigation
Mobile-Specific Features
- Touch and Hold: Long-press activation for context menus
- FAB Integration: Context actions integrated with floating action buttons
- Panel Menus: Full-screen panels for complex multi-select operations
- Voice Actions: Voice command integration where supported
Mobile Menu Adaptations
- Simplified Options: Streamlined menu options for mobile use
- Priority Actions: Most common actions displayed prominently
- Secondary Menus: Less common actions in secondary menu levels
- Quick Gestures: Common actions available via gesture shortcuts
5. Menu Positioning and Behavior
Smart Menu Positioning
- Cursor Following: Menus appear near right-click location
- Boundary Detection: Automatically adjust position to stay on screen
- Multi-Monitor Support: Proper positioning across multiple displays
- Zoom Awareness: Menu positioning adapts to current zoom level
Menu Interaction
- Click Outside: Click outside menu to close without action
- Escape Key: Press Escape to close menu
- Action Execution: Click menu item to execute action and close menu
- Submenu Navigation: Hover over items with submenus to expand
6. Context-Aware Actions
Element Type Adaptation
- Text Elements: Typography-specific actions (font, alignment)
- Image Elements: Image-specific actions (crop, filters, replace)
- Container Elements: Layout-specific actions (padding, child alignment)
- Interactive Elements: Behavior-specific actions (actions, states)
Selection Context
- Single Selection: Individual element actions
- Multi-Selection: Bulk operation actions
- Group Selection: Group-specific actions and child access
- Empty Selection: Canvas-level actions only
Mode Awareness
- Edit Mode: Full range of editing actions available
- Preview Mode: Limited actions, focus on testing
- Live Mode: Production-like behavior, minimal editing
- Responsive Mode: Device-specific actions and previews
7. Browser Extension Integration
Extension Context Actions
- Paste from Extension: Import elements captured from external websites
- Element Recognition: Automatic recognition of copied element types
- Style Preservation: Maintain original styling where possible
- Bulk Import: Import multiple captured elements simultaneously
Extension Menu Features
- Visual Preview: Preview of elements before importing
- Style Mapping: Map external styles to AppStruct components
- Conflict Resolution: Handle naming and ID conflicts automatically
- Quality Control: Validate imported elements for compatibility
8. Advanced Context Features
Custom Actions
- Workflow Integration: Context menus integrate with workflow actions
- Plugin Support: Third-party plugins can add custom menu items
- Macro Recording: Record sequences of context menu actions
- Automation: Automate repetitive context menu operations
Accessibility Features
- Keyboard Navigation: Full keyboard navigation through menus
- Screen Reader Support: Proper ARIA labels and descriptions
- High Contrast: High contrast menu themes for visibility
- Voice Control: Voice-activated menu navigation
9. Menu Customization
User Preferences
- Menu Order: Customize order of menu items
- Hidden Actions: Hide rarely used menu items
- Quick Actions: Pin frequently used actions to top
- Theme Options: Light/dark theme menu options
Team Settings
- Shared Preferences: Team-wide menu customization
- Role-Based Menus: Different menu options based on user role
- Permission Control: Control access to specific menu actions
- Audit Trail: Track context menu usage and actions
10. Performance and Optimization
Menu Performance
- Instant Response: Sub-100ms menu appearance time
- Lazy Loading: Load submenu content only when needed
- Memory Efficiency: Minimal memory footprint for menu system
- Touch Optimization: Optimized for mobile device performance
Caching and Optimization
- Action Caching: Cache frequently used actions for speed
- Intelligent Preloading: Preload likely menu actions
- Resource Management: Efficient management of menu resources
- Battery Optimization: Minimize battery impact on mobile devices
11. Troubleshooting Context Menus
Common Issues
- Menu Not Appearing: Check if element is selectable and not locked
- Actions Disabled: Verify prerequisites for actions (e.g., multi-select for grouping)
- Menu Position Issues: Check screen resolution and zoom settings
- Touch Menu Problems: Verify touch device compatibility
Performance Issues
- Slow Menu Response: Check system performance and close unused applications
- Menu Lag: Verify network connection for cloud-dependent actions
- Action Failures: Check element permissions and project settings
- Mobile Performance: Ensure sufficient device memory and processing power
12. Keyboard Shortcuts for Menu Actions
Quick Action Shortcuts
- Ctrl+C / Cmd+C: Copy (equivalent to Copy menu action)
- Ctrl+V / Cmd+V: Paste (equivalent to Paste menu action)
- Ctrl+D / Cmd+D: Duplicate (equivalent to Duplicate menu action)
- Delete: Delete element (equivalent to Delete menu action)
- Ctrl+G / Cmd+G: Group elements (equivalent to Group menu action)
Layer Management Shortcuts
- Ctrl+] / Cmd+]: Move forwards (equivalent to Move Forwards menu action)
- Ctrl+[ / Cmd+[: Move backwards (equivalent to Move Backwards menu action)
- Ctrl+Shift+] / Cmd+Shift+]: Bring to front
- Ctrl+Shift+[ / Cmd+Shift+[: Send to back
13. Best Practices
Efficient Menu Usage
- Learn Shortcuts: Memorize keyboard shortcuts for frequent actions
- Right Context: Use context menus for quick, contextual actions
- Bulk Operations: Use multi-select menus for efficiency with multiple elements
- Mobile Adaptation: Adapt workflow for touch-based context menus
Workflow Integration
- Consistent Patterns: Develop consistent right-click habits
- Menu Exploration: Explore context menus to discover new features
- Contextual Thinking: Think contextually about what actions make sense
- Efficiency Focus: Use menus to speed up repetitive tasks
14. Context Menu Reference
Element Menu Actions
- Copy: Copy element to clipboard
- Duplicate: Create immediate duplicate
- Group: Combine with selected elements (multi-select required)
- Move Forwards: Increase z-index by 1
- Move Backwards: Decrease z-index by 1
- Delete: Remove element
Canvas Menu Actions
- Paste: Paste copied elements
- Paste from Extension: Import from browser extension
- Select All: Select all page elements
- Clear Selection: Deselect all elements
Multi-Select Menu Actions
- Group Elements: Create group from selection
- Copy All: Copy entire selection
- Duplicate All: Duplicate all selected elements
- Delete All: Remove all selected elements
Need Assistance?
If you encounter any challenges with context menus and element manipulation, please refer to the Documentation or contact our support team at [email protected].